<template>
  <div class="mall">
    <mall-header></mall-header>

    <mall-aside></mall-aside>

    <div class="mall-main">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>

  </div>
</template>

<script>
import Breadcrumb from "../components/header/Breadcrumb";
import SearchBox from "../components/header/SearchBox";
import Settings from "../components/header/Settings";
import MallHeader from "../components/MallHeader";
import MallAside from "../components/MallAside";

export default {
  name: "Mall",
  components: {MallAside, MallHeader, Settings, SearchBox, Breadcrumb},
}

</script>

<style scoped>
.mall {
  margin-top: 15px;
  width: 100%;
}

.mall-main {
  margin-left: 300px;
  margin-right: 10px; 
  width: auto;
  display: flex;
  justify-content: center;
}

</style>